<!-- FAQ -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
  <!-- Grid -->
  <div class="grid md:grid-cols-5 gap-10">
    <div class="md:col-span-2">
      <div class="max-w-xs">
        <h2 class="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">
          Frequently<br />asked questions
        </h2>
        <p class="mt-1 hidden md:block text-gray-600 dark:text-gray-400">
          Answers to the most frequently asked questions.
        </p>
      </div>
    </div>
    <!-- End Col -->

    <div class="md:col-span-3">
      <!-- Accordion -->
      <div class="hs-accordion-group divide-y divide-gray-200 dark:divide-gray-700">
        <div
          class="hs-accordion pb-3 active"
          id="hs-basic-with-title-and-arrow-stretched-heading-one"
        >
          <button
            class="
              hs-accordion-toggle
              group
              pb-3
              inline-flex
              items-center
              justify-between
              gap-x-3
              w-full
              md:text-lg
              font-semibold
              text-left text-gray-800
              transition
              hover:text-gray-500
              dark:text-gray-200
              dark:hover:text-gray-400
            "
            aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-one"
          >
            Can I cancel at anytime?
            <svg
              class="
                hs-accordion-active:hidden
                block
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
            <svg
              class="
                hs-accordion-active:block
                hidden
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
          </button>
          <div
            id="hs-basic-with-title-and-arrow-stretched-collapse-one"
            class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
            aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one"
          >
            <p class="text-gray-600 dark:text-gray-400">
              Yes, you can cancel anytime no questions are asked while you cancel but we would
              highly appreciate if you will give us some feedback.
            </p>
          </div>
        </div>

        <div
          class="hs-accordion pt-6 pb-3"
          id="hs-basic-with-title-and-arrow-stretched-heading-two"
        >
          <button
            class="
              hs-accordion-toggle
              group
              pb-3
              inline-flex
              items-center
              justify-between
              gap-x-3
              w-full
              md:text-lg
              font-semibold
              text-left text-gray-800
              transition
              hover:text-gray-500
              dark:text-gray-200
              dark:hover:text-gray-400
            "
            aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-two"
          >
            My team has credits. How do we use them?
            <svg
              class="
                hs-accordion-active:hidden
                block
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
            <svg
              class="
                hs-accordion-active:block
                hidden
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
          </button>
          <div
            id="hs-basic-with-title-and-arrow-stretched-collapse-two"
            class="
              hs-accordion-content
              hidden
              w-full
              overflow-hidden
              transition-[height]
              duration-300
            "
            aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-two"
          >
            <p class="text-gray-600 dark:text-gray-400">
              Once your team signs up for a subscription plan. This is where we sit down, grab a cup
              of coffee and dial in the details.
            </p>
          </div>
        </div>

        <div
          class="hs-accordion pt-6 pb-3"
          id="hs-basic-with-title-and-arrow-stretched-heading-three"
        >
          <button
            class="
              hs-accordion-toggle
              group
              pb-3
              inline-flex
              items-center
              justify-between
              gap-x-3
              w-full
              md:text-lg
              font-semibold
              text-left text-gray-800
              transition
              hover:text-gray-500
              dark:text-gray-200
              dark:hover:text-gray-400
            "
            aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three"
          >
            How does Preline's pricing work?
            <svg
              class="
                hs-accordion-active:hidden
                block
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
            <svg
              class="
                hs-accordion-active:block
                hidden
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
          </button>
          <div
            id="hs-basic-with-title-and-arrow-stretched-collapse-three"
            class="
              hs-accordion-content
              hidden
              w-full
              overflow-hidden
              transition-[height]
              duration-300
            "
            aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three"
          >
            <p class="text-gray-600 dark:text-gray-400">
              Our subscriptions are tiered. Understanding the task at hand and ironing out the
              wrinkles is key.
            </p>
          </div>
        </div>

        <div
          class="hs-accordion pt-6 pb-3"
          id="hs-basic-with-title-and-arrow-stretched-heading-four"
        >
          <button
            class="
              hs-accordion-toggle
              group
              pb-3
              inline-flex
              items-center
              justify-between
              gap-x-3
              w-full
              md:text-lg
              font-semibold
              text-left text-gray-800
              transition
              hover:text-gray-500
              dark:text-gray-200
              dark:hover:text-gray-400
            "
            aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-four"
          >
            How secure is Preline?
            <svg
              class="
                hs-accordion-active:hidden
                block
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
            <svg
              class="
                hs-accordion-active:block
                hidden
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
          </button>
          <div
            id="hs-basic-with-title-and-arrow-stretched-collapse-four"
            class="
              hs-accordion-content
              hidden
              w-full
              overflow-hidden
              transition-[height]
              duration-300
            "
            aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-four"
          >
            <p class="text-gray-600 dark:text-gray-400">
              Protecting the data you trust to Preline is our first priority. This part is really
              crucial in keeping the project in line to completion.
            </p>
          </div>
        </div>

        <div
          class="hs-accordion pt-6 pb-3"
          id="hs-basic-with-title-and-arrow-stretched-heading-five"
        >
          <button
            class="
              hs-accordion-toggle
              group
              pb-3
              inline-flex
              items-center
              justify-between
              gap-x-3
              w-full
              md:text-lg
              font-semibold
              text-left text-gray-800
              transition
              hover:text-gray-500
              dark:text-gray-200
              dark:hover:text-gray-400
            "
            aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-five"
          >
            How do I get access to a theme I purchased?
            <svg
              class="
                hs-accordion-active:hidden
                block
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
            <svg
              class="
                hs-accordion-active:block
                hidden
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
          </button>
          <div
            id="hs-basic-with-title-and-arrow-stretched-collapse-five"
            class="
              hs-accordion-content
              hidden
              w-full
              overflow-hidden
              transition-[height]
              duration-300
            "
            aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-five"
          >
            <p class="text-gray-600 dark:text-gray-400">
              If you lose the link for a theme you purchased, don't panic! We've got you covered.
              You can login to your account, tap your avatar in the upper right corner, and tap
              Purchases. If you didn't create a login or can't remember the information, you can use
              our handy Redownload page, just remember to use the same email you originally made
              your purchases with.
            </p>
          </div>
        </div>

        <div
          class="hs-accordion pt-6 pb-3"
          id="hs-basic-with-title-and-arrow-stretched-heading-six"
        >
          <button
            class="
              hs-accordion-toggle
              group
              pb-3
              inline-flex
              items-center
              justify-between
              gap-x-3
              w-full
              md:text-lg
              font-semibold
              text-left text-gray-800
              transition
              hover:text-gray-500
              dark:text-gray-200
              dark:hover:text-gray-400
            "
            aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-six"
          >
            Upgrade License Type
            <svg
              class="
                hs-accordion-active:hidden
                block
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
            <svg
              class="
                hs-accordion-active:block
                hidden
                w-3
                h-3
                text-gray-600
                group-hover:text-gray-500
                dark:text-gray-400
              "
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
          </button>
          <div
            id="hs-basic-with-title-and-arrow-stretched-collapse-six"
            class="
              hs-accordion-content
              hidden
              w-full
              overflow-hidden
              transition-[height]
              duration-300
            "
            aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-six"
          >
            <p class="text-gray-600 dark:text-gray-400">
              There may be times when you need to upgrade your license from the original type you
              purchased and we have a solution that ensures you can apply your original purchase
              cost to the new license purchase.
            </p>
          </div>
        </div>
      </div>
      <!-- End Accordion -->
    </div>
    <!-- End Col -->
  </div>
  <!-- End Grid -->
</div>
<!-- End FAQ -->
